<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新人专区</title>
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="CSS/newcomer.css">
    <link rel="stylesheet" href="font/iconfont.css">
</head>
<body>
    <!--顶部  -->
    <div class="header">
        <!-- 顶部黑色部分 -->
        <div class="header-top">
            <!-- 左侧部分 -->
            <div class="ht-left">
                <a href="index.html">首页</a>
                <a href="#">消费者业务网站</a>
                <a href="#">优购码</a>
                <a href="#">企业商用</a>
                <a href="#">Select Region</a>
                <a href="#">更多精彩</a>
            
            </div>
            <!-- 右侧部分 -->
            <div class="ht-right">
                <a href="login.html" target="_blank">请登录</a>
                <a href="logon.html" target="_blank">注册</a>
                <a href="#">我的订单</a>
                <a href="#">联系客服</a>
                <a href="#">网站导航</a>
                <a href="#">手机版</a>
                <a href="#">购物车</a>
            </div>
            
             
        </div>

        
    </div>

    <!-- 下面菜单栏 -->
    <div class="header-menu">
        <div class="logo">
            <img src="img/logo_app.png" alt="">
        </div>

        <div class="header-menu-list">
            <div>
                <a href="#">
                    <span class="iconfont icon-iconfontzhizuobiaozhun45"></span>
                    全部信息
                </a>
            </div>
        </div>
        <div class="header-menu-right">
            <div>
                <a href="#">
                    <i class="iconfont icon-sousuokuang-sousuo"></i>
                </a>
                <a href="#">
                    <i class="iconfont icon-wo"></i>
                </a>
                <a href="#">
                    <i class="iconfont icon-gouwuche"></i>
                </a>
            </div>
        </div>
    </div>


    <!-- 下面的图片 -->
    <div class="img-info">
        <img  class="img-xinren" src="img/新人专享礼遇.webp" alt="">
    </div>

    <!-- 优惠 -->
    <div class="Coupons">
        <div class="Coupons-region">
            <p>用券专区</p>
        </div>

        <div class="Coupons-info">
            <img src="img/10元商品用卷.webp" alt="">
            <!-- 右侧领取部分 -->
            <div class="img-right">
                <a href="#"></a>
            </div>
        </div>
    </div>

    <!-- 用券专区 三个商品 -->
    <div class="box-commodity">
        <div class="container-top">
            <!-- 三个商品展示 -->
            <div class="commodity-list">
                <a href="#">
                    <div>
                        <img src="img/华为手环8.png" alt="">
                    </div>
                    <h4>华为手环 8</h4>
                    <p>8.99毫米轻薄设计</p>
                    <b>￥189</b>
                </a>
            </div>

            <div class="commodity-list">
                <a href="#">
                    <div>
                        <img src="img/华为手环8.png" alt="">
                    </div>
                    <h4>华为手环 8</h4>
                    <p>8.99毫米轻薄设计</p>
                    <b>￥189</b>
                </a>
            </div>

            <div class="commodity-list">
                <a href="#">
                    <div>
                        <img src="img/华为手环8.png" alt="">
                    </div>
                    <h4>华为手环 8</h4>
                    <p>8.99毫米轻薄设计</p>
                    <b>￥189</b>
                </a>
            </div>

        </div>
        <div class="container-bottom">
            <a href="#">
                <p>更多</p>
            </a>
        </div>
    </div>

    <!-- 一元专区部分 -->
    <div class="container">
        <!-- 上面文字 -->
        <div class="container-top">
            <h4>一元专区</h4>
        </div>
        <!-- 三个一元会员 -->
        <div class="box-list">
            <div class="container-list">
                <a href="#">
                    <div class="list-left">
                        <div>
                            <img src="img/3天华为影视视频.png" alt="">
                        </div>
                    </div>
                    <div class="list-right">
                        <div class="right-top">
                            <!-- 溢出隐藏 -->
                            <p>【限购1件】华为视频3天会员卡（仅限手机端使用）</p>
                        </div>
        
                        <div class="right-centor">
                            <p>新世界新体验</p>
                        </div>
        
                        <div class="right-bottom">
                            <div class="bottom-left">
                                <h4>￥1</h4>
                            </div>
                            <div class="bottom-right">
                                立即购买
                            </div>
                        </div>
                    </div>
                </a>
                <a href="#">
                    <div class="list-left">
                        <div>
                            <img src="img/3天华为影视视频.png" alt="">
                        </div>
                    </div>
                    <div class="list-right">
                        <div class="right-top">
                            <!-- 溢出隐藏 -->
                            <p>【限购1件】华为视频3天会员卡（仅限手机端使用）</p>
                        </div>
        
                        <div class="right-centor">
                            <p>新世界新体验</p>
                        </div>
        
                        <div class="right-bottom">
                            <div class="bottom-left">
                                <h4>￥1</h4>
                            </div>
                            <div class="bottom-right">
                                立即购买
                            </div>
                        </div>
                    </div>
                </a>
    
                <a href="#">
                    <div class="list-left">
                        <div>
                            <img src="img/3天华为影视视频.png" alt="">
                        </div>
                    </div>
                    <div class="list-right">
                        <div class="right-top">
                            <!-- 溢出隐藏 -->
                            <p>【限购1件】华为视频3天会员卡（仅限手机端使用）</p>
                        </div>
        
                        <div class="right-centor">
                            <p>新世界新体验</p>
                        </div>
        
                        <div class="right-bottom">
                            <div class="bottom-left">
                                <h4>￥1</h4>
                            </div>
                            <div class="bottom-right">
                                立即购买
                            </div>
                        </div>
                    </div>
                </a>
    
            </div>
        </div>
    </div>

    <!-- 商品部分   新人特惠-->
    <!-- 最外外面的大盒子 -->
    <div class="productB">
        <!-- 标题盒子 -->
        <div class="productB-title">
            <h3>新人特惠</h3>
        </div>
        <!-- 商品中的大盒子 -->
        <div class="productB-box">
            <!-- 商品盒子 -->
            <div class="pb-list-B">
                <a href="#">
                    <img src="img/new-pd-1.png" alt="">
                    <h4>格林盈璐无雾加湿器</h4>
                    <p>65度巴氏杀菌</p>
                    <b>￥688</b>
                    <del>￥999</del>
                </a>
            </div>
            <div class="pb-list-B">
                <a href="#">
                    <img src="img/new-pd-1.png" alt="">
                    <h4>格林盈璐无雾加湿器</h4>
                    <p>65度巴氏杀菌</p>
                    <b>￥688</b>
                    <del>￥999</del>
                </a>
            </div>
            <div class="pb-list-B">
                <a href="#">
                    <img src="img/new-pd-1.png" alt="">
                    <h4>格林盈璐无雾加湿器</h4>
                    <p>65度巴氏杀菌</p>
                    <b>￥688</b>
                    <del>￥999</del>
                </a>
            </div>
            <div class="pb-list-B">
                <a href="#">
                    <img src="img/new-pd-1.png" alt="">
                    <h4>格林盈璐无雾加湿器</h4>
                    <p>65度巴氏杀菌</p>
                    <b>￥688</b>
                    <del>￥999</del>
                </a>
            </div>
            <div class="pb-list-B">
                <a href="#">
                    <img src="img/new-pd-1.png" alt="">
                    <h4>格林盈璐无雾加湿器</h4>
                    <p>65度巴氏杀菌</p>
                    <b>￥688</b>
                    <del>￥999</del>
                </a>
            </div>
            <div class="pb-list-B">
                <a href="#">
                    <img src="img/new-pd-1.png" alt="">
                    <h4>格林盈璐无雾加湿器</h4>
                    <p>65度巴氏杀菌</p>
                    <b>￥688</b>
                    <del>￥999</del>
                    
                </a>
            </div>
            <div class="pb-list-B">
                <a href="#">
                    <img src="img/new-pd-1.png" alt="">
                    <h4>格林盈璐无雾加湿器</h4>
                    <p>65度巴氏杀菌</p>
                    <b>￥688</b>
                    <del>￥999</del>
                </a>
            </div>
            <div class="pb-list-B">
                <a href="#">
                    <img src="img/new-pd-1.png" alt="">
                    <h4>格林盈璐无雾加湿器</h4>
                    <p>65度巴氏杀菌</p>
                    <b>￥688</b>
                    <del>￥999</del>
                </a>
            </div>
            <div class="pb-list-B">
                <a href="#">
                    <img src="img/new-pd-1.png" alt="">
                    <h4>格林盈璐无雾加湿器</h4>
                    <p>65度巴氏杀菌</p>
                    <b>￥688</b>
                    <del>￥999</del>
                </a>
            </div>
            <div class="pb-list-B">
                <a href="#">
                    <img src="img/new-pd-1.png" alt="">
                    <h4>格林盈璐无雾加湿器</h4>
                    <p>65度巴氏杀菌</p>
                    <b>￥688</b>
                    <del>￥999</del>
                </a>
            </div>
        </div>
        <!-- 底部更多 -->
        <div class="productB-button">
            <div class="list-button">
                <a href="#">
                    <div>
                        <p>更多</p>
                    </div>
                    <img src="img/right.png" alt="">
                </a>
            </div>
        </div>

    </div>
    <div id="toTop">
        <div class="toTop-smallbox">
            <div class="toTop-top">
                <span class="iconfont icon-tubiao_fanhuidingbu"></span>
            </div class="toTop-bottom">
                返回顶部
            </div>
        </div>
    </div>

    <footer>
        <div class="new-fotter">
            <img src="img/new-fotter-1.webp" alt="">
        </div>
    </footer>

    <script src="js/newcomer.js"></script>
</body>
</html>